import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { Tag } from '@/types/layout'

const useTagsStore = defineStore('tags', () => {
  const list = ref<Tag[]>([])
  const show = computed(() => {
    return list.value.length > 0
  })
  const nameList = computed(() => {
    return list.value.map((item: Tag) => item.name)
  })
  const delTagsItem = (index: number) => {
    list.value.splice(index, 1)
  }
  const addTagsItem = (data: Tag) => {
    list.value.push(data)
  }
  const clearTags = () => {
    list.value = []
  }
  const closeTagsOther = (data: Tag[]) => {
    list.value = data
  }

  return {
    list, show, nameList, delTagsItem, addTagsItem, clearTags, closeTagsOther
  }
}, {
  persist: {
    storage: sessionStorage
  }
})

export default useTagsStore
